<!DOCTYPE html>

<html>

	<head>
		<!-- 页面meta -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>个人信息</title>
		<meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">

		<!-- 引入样式 -->
		<link rel="stylesheet" href="../plugins/elementui/index.css">
		<link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="../css/style.css">
		<!-- 引入组件库 -->
		<script src="../js/vue.js"></script>
		<script src="../plugins/elementui/index.js"></script>
		<script type="text/javascript" src="../js/jquery.min.js"></script>
		<script src="../js/axios-0.18.0.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
				border: 0;
			}

			.el-header {
				background-color: #B3C0D1;
				color: #333;
				line-height: 60px;
			}

			.el-aside {
				color: #333;
			}

			.el-menu {
				border: none;
				border-right-width: 0;
			}

			.el-button {
				border: none;
			}

			.buttonColor {
				background-color: rgb(32, 155, 159);
			}

			.buttonColor:hover {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor:focus {
				background-color: rgba(32, 155, 159, 0.773)
			}

			.buttonColor2:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li:hover {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-pager li.active {
				color: rgba(32, 155, 159, 0.773)
			}

			.el-main {
				height: 700px;
			}

			.box {
				height: 550px;
				position: relative;
				width: 98%;
			}

			.box-card {
				width: 70%;
				margin-left: 160px;
				margin-top: 60px;
			}

			.clearfix {
				text-align: center;
				font-size: 15px;
			}

			.text {
				text-align: center;
				font-size: 24px;
				font-weight: 700;
				vertical-align: super;
			}

		</style>
	</head>

	<body style="background-color: #545c64;">
		<div id="app">
			<el-header style="text-align: left; background-color: rgba(1, 12, 21, 0.421);">
				<div style="font-size: 20px; color:rgb(32, 155, 159)">
					<div style="float: left;">
						<span>图书管理平台</span></div>
					<div style="float: right; font-size: 15px;">
						<a @click="logout()" style="color:rgb(32, 155, 159); cursor:pointer;">安全退出</a></div>
					<div style="width: 100px; float: right; font-size: 15px;">
						<a href="personal.html" style="color: rgb(32, 155, 159);">{{ name }}</a>
					</div>
				</div>
			</el-header>
			<el-container style="height: auto;">
				<el-aside width="200px" style="background-color: rgba(1, 12, 21, 0);">
					<el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" active-text-color="rgb(32, 155, 159)" style="background-color: rgba(1, 12, 21, 0.7); color: white;">
						<el-menu-item index="1" class="el-menu-item" @click="load1()" style="border-right: none;"><i class="el-icon-chat-line-square"></i>借书必读</el-menu-item>
						<el-menu-item index="2" class="el-menu-item" @click="load2()" style="border-right: none;"><i class="el-icon-postcard"></i>个人信息</el-menu-item>
						<el-menu-item index="3" class="el-menu-item" @click="load3()" style="border-right: none;"><i class="el-icon-search"></i>我要借书</el-menu-item>
						<el-menu-item index="4" class="el-menu-item" @click="load4()" style="border-right: none;"><i class="el-icon-document-copy"></i>我要还书</el-menu-item>
					</el-menu>
				</el-aside>

				<!-- <el-container> -->
				<el-main>
					<div class="content-header">
						<h1>个人信息</h1>
					</div>
					<div class="box">
						<el-card class="box-card" v-model="myData">
							<el-form ref="dataEditForm" :model="formData" label-position="right" label-width="100px">
								<el-row>
									<el-col :span="12">
										<el-form-item label="用户账号" prop="username">
											<el-input v-model="formData.username" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="用户密码" prop="password">
											<el-input v-model="formData.password" type="password" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="用户姓名" prop="name">
											<el-input v-model="formData.name" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="用户年龄" prop="age">
											<el-input v-model="formData.age" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="用户性别" prop="sex">
											<el-input v-model="formData.sex" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="用户手机号" prop="tel">
											<el-input v-model="formData.tel" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="借书上限" prop="limitNumber">
											<el-input v-model="formData.limitNumber" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="已借数量" prop="lentNumber">
											<el-input v-model="formData.lentNumber" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="余额（元）" prop="money">
											<el-input v-model="formData.money" />
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
						</el-card>
						<div style="position: absolute; right:260px; top:20px;">
							<el-button type="primary" size="mini" class="buttonColor" @click="handleUpdate()">编辑</el-button>
						</div>
					</div>
					<!-- 编辑标签弹层 -->
					<div class="add-form">
						<el-dialog title="编辑我的信息" :visible.sync="dialogFormVisible4Edit">
							<el-form ref="dataEditForm" :model="formData" :rules="rules" label-position="right" label-width="100px">
								<el-row>
									<el-col :span="12">
										<el-form-item label="修改密码" prop="password">
											<el-input type="password" v-model="formData.password" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="确认密码" prop="password2">
											<el-input type="password" v-model="password2" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="用户姓名" prop="name">
											<el-input v-model="formData.name" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="用户年龄" prop="age">
											<el-input v-model="formData.age" />
										</el-form-item>
									</el-col>
								</el-row>
								<el-row>
									<el-col :span="12">
										<el-form-item label="用户性别" prop="sex">
											<el-input v-model="formData.sex" />
										</el-form-item>
									</el-col>
									<el-col :span="12">
										<el-form-item label="用户手机号" prop="tel">
											<el-input v-model="formData.tel" />
										</el-form-item>
									</el-col>
								</el-row>
							</el-form>
							<div slot="footer" class="dialog-footer">
								<el-button class="buttonColor2" @click="dialogFormVisible4Edit = false">取消</el-button>
								<el-button type="primary" class="buttonColor" @click="handleEdit()">确定</el-button>
							</div>
						</el-dialog>
					</div>
				</el-main>
				<!-- </el-container> -->
			</el-container>
		</div>

	</body>

	<script>
		var vue = new Vue({
			el: '#app',
			data: {
				myData: [],
				name: '',
				formData: {}, //表单数据
				password2: '',
				dialogFormVisible4Edit: false, //编辑表单是否可见
				rules: { //校验规则
					password: [{
						required: true,
						message: '用户密码为必填项',
						trigger: 'blur'
					}],
					password2: [{
						required: true,
						message: '确认密码为必填项',
						trigger: 'blur'
					}],
					name: [{
						required: true,
						message: '用户姓名为必填项',
						trigger: 'blur'
					}],
					tel: [{
						required: true,
						message: '用户手机号为必填项',
						trigger: 'blur'
					}],
				},
			},

			//钩子函数，VUE对象初始化完成后自动执行
			created() {
				this.name = localStorage.getItem("name");
				if(localStorage.getItem("username") == null){
					alert('请先登录!!!');
					window.location.href = "../index.html";
				}
				this.getUser();
			},

			methods: {
				// 网页跳转
				load1() {
					window.location.href = "required.html";
				},
				load2() {
					window.location.href = "personal.html";
				},
				load3() {
					window.location.href = "search.html";
				},
				load4() {
					window.location.href = "record.html";
				},

				// 退出登录
				logout() {
					localStorage.removeItem("username");
					localStorage.removeItem("password");
					localStorage.removeItem("name");
					window.location.href = "../index.html";
				},

				//查询我的信息
				getUser() {
					axios.get("/user/" + localStorage.getItem("username")).then((res) => {
						if (res.data.code == 20041) {
							this.formData = res.data.data;
						} else {
							this.$message.error(res.data.msg);
						}
					})
				},

				//弹出编辑窗口
				handleUpdate() {
					axios.get("/user/" + localStorage.getItem("username")).then((res) => {
						if (res.data.code == 20041) {
							//展示弹层，加载数据
							this.formData = res.data.data;
							this.dialogFormVisible4Edit = true;
						} else {
							this.$message.error(res.data.msg);
						}
					});
				},

				//编辑
				handleEdit() {
					// 校验两次密码输入
					if(this.password2 != this.formData.password){
						this.$message.error("修改失败！两次密码输入不一致！");
						this.password2 = '';
						return;
					}
					console.log(this.formData)
					//发送ajax请求
					axios.put("/user", this.formData).then((res) => {
						//如果操作成功，关闭弹层，显示数据
						if (res.data.code == 20031) {
							this.dialogFormVisible4Edit = false;
							this.$message.success("修改成功");
						} else if (res.data.code == 20030) {
							this.$message.error("修改失败");
						} else {
							this.$message.error(res.data.msg);
						}
					}).finally(() => {
						this.getUser();
						this.password2 = '';
					});
				}
			}
		})
	</script>

</html>